<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>盘点单详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
      </div>
      
      <el-descriptions :column="2" border>
        <el-descriptions-item label="盘点单号">{{ form.takingCode }}</el-descriptions-item>
        <el-descriptions-item label="盘点类型">
          <dict-tag :options="typeOptions" :value="form.takingType"/>
        </el-descriptions-item>
        <el-descriptions-item label="仓库名称">{{ form.warehouseName }}</el-descriptions-item>
        <el-descriptions-item label="盘点日期">{{ parseTime(form.checkDate) }}</el-descriptions-item>
        <el-descriptions-item label="是否盲盘">{{ form.blindFlag === 'Y' ? '是' : '否' }}</el-descriptions-item>
        <el-descriptions-item label="是否冻结库存">{{ form.frozenFlag === 'Y' ? '是' : '否' }}</el-descriptions-item>
        <el-descriptions-item label="盘点状态">
          <dict-tag :options="statusOptions" :value="form.status"/>
        </el-descriptions-item>
        <el-descriptions-item label="创建人">{{ form.createBy }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ parseTime(form.createTime) }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ parseTime(form.updateTime) }}</el-descriptions-item>
        <el-descriptions-item :span="2" label="盘点说明">{{ form.remark }}</el-descriptions-item>
      </el-descriptions>
      
      <el-tabs v-model="activeTab" type="card" class="mt20">
        <el-tab-pane label="盘点明细" name="details">
          <el-table v-loading="detailLoading" :data="detailList" height="350">
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="物料编码" prop="itemId" min-width="120" />
            <el-table-column label="物料名称" prop="itemName" min-width="120" />
            <el-table-column label="规格型号" prop="specification" min-width="120" />
            <el-table-column label="单位" prop="unitName" width="80" />
            <el-table-column label="系统库存" prop="systemQuantity" width="100" v-if="form.blindFlag !== 'Y'" />
            <el-table-column label="实际库存" prop="actualQuantity" width="100" />
            <el-table-column label="盘盈盘亏" prop="differenceQuantity" width="100" v-if="form.blindFlag !== 'Y'">
              <template slot-scope="scope">
                <span :class="scope.row.differenceQuantity > 0 ? 'text-danger' : (scope.row.differenceQuantity < 0 ? 'text-success' : '')">
                  {{ scope.row.differenceQuantity }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="remark" min-width="120" />
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="入库记录" name="inbound">
          <el-table v-loading="inboundLoading" :data="inboundList" height="350">
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="入库单号" prop="inboundCode" min-width="120" />
            <el-table-column label="物料编码" prop="materialCode" min-width="120" />
            <el-table-column label="物料名称" prop="materialName" min-width="120" />
            <el-table-column label="规格型号" prop="specification" min-width="120" />
            <el-table-column label="入库数量" prop="quantity" width="100" />
            <el-table-column label="入库时间" prop="createTime" width="160">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作人" prop="createBy" width="100" />
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="出库记录" name="outbound">
          <el-table v-loading="outboundLoading" :data="outboundList" height="350">
            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column label="出库单号" prop="outboundCode" min-width="120" />
            <el-table-column label="物料编码" prop="materialCode" min-width="120" />
            <el-table-column label="物料名称" prop="materialName" min-width="120" />
            <el-table-column label="规格型号" prop="specification" min-width="120" />
            <el-table-column label="出库数量" prop="quantity" width="100" />
            <el-table-column label="出库时间" prop="createTime" width="160">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作人" prop="createBy" width="100" />
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="操作记录" name="operation">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in operationList"
              :key="index"
              :timestamp="activity.operateTime"
              :type="getTimelineItemType(activity.operateType)"
            >
              {{ activity.operateBy }} {{ activity.operateContent }}
              <div v-if="activity.remark" class="operation-remark">
                备注：{{ activity.remark }}
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
      </el-tabs>
      
      <div class="bottom-control">
        <el-button type="primary" @click="handlePrint" icon="el-icon-printer">打印</el-button>
        <el-button @click="goBack">返回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getInventoryCheck, listCheckDetails, listInboundRecords, listOutboundRecords, listOperationRecords } from "@/api/inventory/check";

export default {
  name: "StockTakingDetail",
  data() {
    return {
      // 选中的选项卡
      activeTab: "details",
      // 遮罩层
      detailLoading: false,
      inboundLoading: false,
      outboundLoading: false,
      operationLoading: false,
      // 表单参数
      form: {},
      // 盘点明细数据
      detailList: [],
      // 入库记录数据
      inboundList: [],
      // 出库记录数据
      outboundList: [],
      // 操作记录数据
      operationList: [],
      // 盘点状态字典
      statusOptions: [
        { dictLabel: "草稿", dictValue: "0" },
        { dictLabel: "进行中", dictValue: "1" },
        { dictLabel: "已完成", dictValue: "2" },
        { dictLabel: "已取消", dictValue: "3" }
      ],
      // 盘点类型字典
      typeOptions: [
        { dictLabel: "全面盘点", dictValue: "1" },
        { dictLabel: "动态盘点", dictValue: "2" },
        { dictLabel: "周期盘点", dictValue: "3" }
      ],
    };
  },
  created() {
    const id = this.$route.params && this.$route.params.id;
    this.getDetail(id);
  },
  methods: {
    /** 获取盘点详情 */
    getDetail(id) {
      getInventoryCheck(id).then(response => {
        this.form = response.data.data;
        this.getDetailList(id);
      });
    },
    /** 获取盘点明细列表 */
    getDetailList(id) {
      this.detailLoading = true;
      listCheckDetails({ takingId: id }).then(response => {
        this.detailList = response.rows;
        this.detailLoading = false;
      });
    },
    /** 获取入库记录 */
    getInboundList(id) {
      this.inboundLoading = true;
      listInboundRecords(id).then(response => {
        this.inboundList = response.data;
        this.inboundLoading = false;
      });
    },
    /** 获取出库记录 */
    getOutboundList(id) {
      this.outboundLoading = true;
      listOutboundRecords(id).then(response => {
        this.outboundList = response.data;
        this.outboundLoading = false;
      });
    },
    /** 获取操作记录 */
    getOperationList(id) {
      this.operationLoading = true;
      listOperationRecords(id).then(response => {
        this.operationList = response.data;
        this.operationLoading = false;
      });
    },
    /** 标签页切换事件 */
    handleClick(tab) {
      const id = this.$route.params.id;
      switch (tab.name) {
        case "inbound":
          if (this.inboundList.length === 0) {
            this.getInboundList(id);
          }
          break;
        case "outbound":
          if (this.outboundList.length === 0) {
            this.getOutboundList(id);
          }
          break;
        case "operation":
          if (this.operationList.length === 0) {
            this.getOperationList(id);
          }
          break;
      }
    },
    /** 获取时间线条目类型 */
    getTimelineItemType(operateType) {
      switch (operateType) {
        case "create":
          return "primary";
        case "submit":
          return "warning";
        case "approve":
          return "success";
        case "reject":
          return "danger";
        default:
          return "info";
      }
    },
    /** 打印操作 */
    handlePrint() {
      this.$modal.msgSuccess("打印功能已触发");
    },
    /** 返回操作 */
    goBack() {
      this.$router.push("/ck/Stocktaking");
    }
  },
  watch: {
    activeTab(newVal) {
      const id = this.$route.params.id;
      switch (newVal) {
        case "inbound":
          if (this.inboundList.length === 0) {
            this.getInboundList(id);
          }
          break;
        case "outbound":
          if (this.outboundList.length === 0) {
            this.getOutboundList(id);
          }
          break;
        case "operation":
          if (this.operationList.length === 0) {
            this.getOperationList(id);
          }
          break;
      }
    }
  }
};
</script>

<style scoped>
.mt20 {
  margin-top: 20px;
}
.bottom-control {
  margin-top: 20px;
  text-align: center;
}
.operation-remark {
  color: #909399;
  font-size: 13px;
  margin-top: 5px;
}
.text-danger {
  color: #F56C6C;
}
.text-success {
  color: #67C23A;
}
</style> 